<template>
  <div class='container'>
    <el-card class="box-card">
      <strong style="fontSize: 14px" class="box-strong">学科名称</strong>
      <el-input v-model="queryInfo.subjectName" class="box-ipt"></el-input>
      <el-button size="small" @click="eliminate">清除</el-button>
      <el-button type="primary" size="small" @click="search">搜索</el-button>
      <el-button type="success" icon="el-icon-edit" style=" float: right;" size="small" @click="addFormVisible=true">新增学科</el-button>
      <el-alert :title="'数据一共'+counts+'条'" type="info" show-icon :closable="false" class="box-alert"></el-alert>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="50" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期" :formatter="dateFormat" width="170"></el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" :formatter="isOr"> </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录"> </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="270">
          <template slot-scope="scope">
            <!--@click="goClassification"      @click="goLabel" -->
            <el-button type="text" @click="classificationBtn(scope.row)">学科分类</el-button>
            <el-button type="text" @click="labelBtn(scope.row)">学科标签</el-button>
            <el-button type="text" @click="modify(scope.row)">修改</el-button>
            <el-button type="text" @click="deleteBtn(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-sizes="[10, 20, 30, 40]" :page-size="queryInfo.pagesize" layout=" prev, pager, next,sizes, jumper" :total="400" class="paging-right"></el-pagination>
    </el-card>
    <!-- 学科修改弹窗 -->
    <el-dialog title="学科地址" :visible.sync="dialogFormVisible" width="400px" @close="editHandleClose">
      <el-form :model="ruleForm" :rules="rules" ref="editRuleFormref" label-width="100px" class="elform">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="ruleForm.subjectName"></el-input>
        </el-form-item>
      </el-form>
      <el-switch style="display: block" v-model="value2" active-color="#13ce66" inactive-color="#ff4949" inactive-text="是否显示"></el-switch>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editParameter">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增学科 -->
    <el-dialog title="新增学科" :visible.sync="addFormVisible" width="400px" @close="addHandleClose">
      <el-form :model="addRuleForm" :rules="addRules" ref="editRuleFormref" label-width="100px" class="elform">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="addRuleForm.subjectName"></el-input>
        </el-form-item>
      </el-form>
      <el-switch style="display: block" v-model="value3" active-color="#13ce66" inactive-color="#ff4949" inactive-text="是否显示"></el-switch>
      <div slot="footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubject">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>

<script>
import { list, update, remove, add } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      // 总条数
      counts: '',
      // 获取学科列表参数
      queryInfo: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      // 表格数据
      tableData: [],
      // 修改的弹框
      dialogFormVisible: false,
      // 开关
      value2: true,
      // 输入的内容
      ruleForm: { id: 0, subjectName: '', isFrontDisplay: 0 },
      // 验证规则
      rules: {
        subjectName: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
      },
      // 添加的弹框
      addFormVisible: false,
      // 添加的数据
      addRuleForm: {
        subjectName: '',
        isFrontDisplay: 0
      },
      // 开关
      value3: true,
      addRules: {
        subjectName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getSubjectList()
  },
  methods: {
    // 分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.queryInfo.pagesize = val
      this.getSubjectList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.queryInfo.page = val
      this.getSubjectList()
    },
    // 获取列表
    async getSubjectList () {
      this.$store.state.labelId = null
      this.$store.state.labelName = null
      this.$store.state.classificationId = null
      this.$store.state.classificationName = null
      const { data: res } = await list(this.queryInfo)
      this.counts = res.counts
      this.tableData = res.items
    },
    // 格式化时间
    dateFormat (row) {
      const strval = row.addDate.substring(0, 10) + ' ' + row.addDate.substring(11, 19)
      return strval
    },
    // 是否
    isOr (row) {
      return row.isFrontDisplay === 1 ? '是' : '否'
    },
    // 清除内容
    eliminate () {
      this.queryInfo.subjectName = ''
      this.getSubjectList()
    },
    // 搜索
    search () {
      this.getSubjectList()
    },
    // 跳转到分类页
    /* goClassification () {
      this.$router.push('')
    } */
    // 监听编辑关闭事件
    editHandleClose () {
      this.$refs.editRuleFormref.resetFields()
      this.ruleForm.subjectName = ''
    },
    // 修改
    async modify (row) {
      console.log(row)
      this.ruleForm.id = row.id
      this.ruleForm.subjectName = row.subjectName
      row.isFrontDisplay === 1 ? this.value2 = true : this.value2 = false
      this.dialogFormVisible = true
    },
    // 删除
    deleteBtn (id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await remove({ id: id })
        if (res.success !== true) {
          this.$message.error('删除失败')
        }
        this.$message.success('删除成功')
        console.log(res)
        this.getSubjectList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改提交事件
    async editParameter () {
      this.ruleForm.isFrontDisplay = this.value2 === true ? 1 : 0
      await update(this.ruleForm)
      this.dialogFormVisible = false
      this.$message.success('修改成功')
      this.getSubjectList()
    },
    // 添加提交事件
    async addSubject () {
      this.addRuleForm.isFrontDisplay = this.value3 === true ? 1 : 0
      await add(this.addRuleForm)
      this.$message.success('添加成功')
      this.getSubjectList()
      this.addFormVisible = false
    },
    // 监听关闭按钮
    addHandleClose () {
      this.addRuleForm.subjectName = ''
      this.addRuleForm.isFrontDisplay = 0
      this.addFormVisible = false
    },
    // 页面跳转到目录页
    classificationBtn (row) {
      console.log(row)
      this.$store.state.classificationId = row.id
      this.$store.state.classificationName = row.subjectName
      this.$router.push({ name: 'subjects-directorys' })
    },
    // 跳转到标签页
    labelBtn (row) {
      this.$store.state.labelId = row.id
      this.$store.state.labelName = row.subjectName
      this.$router.push({ name: 'subjects-tags' })
    }
  }

}
</script>

<style scoped lang='less'>
.box-strong{
  margin-left: 10px;
}
.box-ipt{
  display: inline-block;
  padding: 0 10px;
  width:230px;
}
.box-alert{
  margin: 20px 0px;
}
.paging-right{
  float: right;
  margin: 15px;
}
.elform{
  margin-left: -23px;
}
</style>
